/**
 * Created by 小敏哥 on 2017/6/21.
 */
import React, {Component} from 'react';
import style from './inspectionType.scss';
import CheckBoxItem from '../common/checkBox/checkBoxItem';
class InspectionType extends Component {
    constructor(props) {
        super(props);
        this.state={
            selectedIndex:props.init!=undefined?props.init:0,
        };
        this.structRadioGroup=this.structRadioGroup.bind(this);
    }

    //根据数据源筛出选中项,checked值优先，提供一个从外部操作的入口，如取不到则取selectedIndex
    getIndex(){
        for(let i=0;i<this.props.radioData.length;i++){
            if(this.props.radioData[i].checked){
                return i;
            }
        }
        return this.state.selectedIndex;
    }


    //接收新的props时动态更新数据
    componentWillReceiveProps(nextProps){
        //如果初始值不同，则可判断为所有数据重新加载，此时直接将初始值作为选中值
        if(nextProps.init!=this.props.init){
            this.setState({
                selectedIndex:nextProps.init
            })
        }
        else {
            setTimeout(() => {
                this.setState({
                    selectedIndex: this.getIndex()
                })
            }, 0);
        }
    }

    componentDidMount(){
        this.setState({
            selectedIndex:this.getIndex()
        })
    }
    static propTypes = {
        radioData:React.PropTypes.array,//初始数据，可选
        checkedCallBack:React.PropTypes.func,//切换后回调接口
        iconClick:React.PropTypes.func,//点击图标后弹框用的函数
        init:React.PropTypes.number//默认值，可选
    };

    //切换选项
    setCheckedIndex(index){
        this.setState({
            selectedIndex:index
        });
        this.props.checkedCallBack&&this.props.checkedCallBack(index);
    }

    //构建单选按钮
    structRadioGroup(){
        return this.props.radioData.map((item,index)=>{
            return <CheckBoxItem key={"checkBoxItem"+index} text={item.text} className={style.radioItem+' '+item.className
            } checked={item.checked} type={item.type} forceChecked={this.state.selectedIndex==index} checkedCallBack={()=>{this.setCheckedIndex(index)}}/>
        });
    }

    render(){
        return <div className={style.inspectionTypeContainer}>
            <div className={style.title} onClick={this.props.iconClick}><div>{this.props.title}</div><img src="./images/icon_warn_darkblue.png"/></div>
            {this.structRadioGroup()}
        </div>
    }


}


export default InspectionType;